<template>
  <basic-container v-loading="loading" height="100%">
    <el-tabs v-model="tabDetailPane" type="border-card">
      <el-tab-pane label="表单" name="actMainForm">
        <start-panel v-if="procFormConfig" :content-types="['body','footer']">
          <proc-main-form
              :form-config="procFormConfig"
              :form-prop-config="formPropConfig"
              v-model="procFormData"
              :is-edit="true"

          ></proc-main-form>
          <template #footer>
            <el-button @click="$router.closeRouter()">取消</el-button>
            <el-button @click="taskTaskAgree()" icon="el-icon-check" type="primary">同意</el-button>
          </template>
        </start-panel>
      </el-tab-pane>
      <el-tab-pane label="正文" v-if="startPropTools.eq(procFunConfig,'zenWenDocumentPanel','true')" name="zenWenDoc">
        <start-office v-model="officeOssId" style="height: 600px" ref="startOffice"></start-office>
      </el-tab-pane>
      <el-tab-pane label="审批记录" name="authHistory">
        <start-panel v-if="historyTasks" :content-types="['body']">
          <task-history v-model="historyTasks" :start-user="procDetailModel.startUser"
                        :start-time="procDetailModel.startTime"
                        :end-time="procDetailModel.endTime"></task-history>
        </start-panel>
      </el-tab-pane>
      <el-tab-pane label="流程跟踪" name="procTrack">
        <start-panel v-if="bpmnXml" :content-types="['body']">
          <bpmn-proc-track class="bpmn-proc-track"
                           v-model="bpmnXml" :elements-history="historyActs"></bpmn-proc-track>
        </start-panel>
      </el-tab-pane>


    </el-tabs>
  </basic-container>
</template>
<script>
import StartActStart from "@/views/start/activiti/components/startActStart.vue";
import StartPanel from "components/start-panel/index.vue";
import procMainForm from "@/views/start/activiti/components/actForm/procMainForm.vue";
import BpmnProcTrack from "@/views/start/activiti/components/bpmn/ProcTrack.vue";
import TaskHistory from "@/views/start/activiti/components/task/taskHistory.vue";
import startMyActTaskApi from "@/api/start/activiti/core/startMyActTaskApi";
import useUserStore from "@/stores/useUserStore";
import userActCommon from "@/views/start/activiti/components/comment/userActCommon";
import StartOffice from "components/start-components/start-office/index.vue";
import startPropTools from "@/mixins/startPropTools";

export default {
  computed: {
    startPropTools() {
      return startPropTools
    }
  },
  components: {StartOffice, TaskHistory, BpmnProcTrack, procMainForm, StartPanel, StartActStart},
  data() {
    const userStore = useUserStore()
    return {
      tabDetailPane: "actMainForm",
      loading: true,
      userId: userStore.userInfo.id,
      procFormConfig: null,
      formPropConfig: {},
      procFormData: null,
      bpmnXml: null,
      historyActs: null,
      historyTasks: null,
      taskId: null,
      officeOssId: null,
      procFunConfig: {},
    }
  },
  created() {

    this.init()
  },
  mounted() {

  },
  methods: {
    init() {
      this.taskId = this.$route.params.taskId
      startMyActTaskApi.getWaitAuthTaskDetail(this.taskId).then(res => {
        let data = res.data.data;
        this.procDetailModel = data
        this.officeOssId = data.officeOssId;
        this.formPropConfig = data.formPropConfig || {}
        this.procFormConfig = data.procFormConfig
        this.procFormData = data.procFormData
        this.historyActs = data.historyActs
        this.bpmnXml = data.bpmnXml
        this.procFunConfig = data.procFunConfig
        this.historyTasks = data.historyTasks || []
        this.loading = false;
      })
    },
    taskTaskAgree() {
      let data = {};
      data.handlerStatus = 90;
      // data.nodeFormData = taskData.formData;
      // data.nextTaskAuthUser = taskData.nextTaskAuthUser;
      data.nodeVariables = null;
      data.authUser = null;
      data.targetTaskDefKey = null;
      data.targetTaskAuthUsers = null;
      userActCommon.showDialog(false).then(({value, done}) => {
        data.handlerOpinion = value
        return startMyActTaskApi.handlerNodeApply(this.taskId, data)
      }).then(res => {
        this.$message.success("操作成功")
        this.$router.closeRouter()
      }).catch((err) => {

      })
    },
    createdPrompt(title, content, inputValidator, obj = {}) {
      let config = {}
      config.confirmButtonText = "提交"
      config.cancelButtonText = "取消"
      config.showInput = true;
      config.inputType = "textarea";
      config.inputValidator = inputValidator
      config = Object.assign(config, obj)
      return this.$prompt(content, title, config)
    },
    /**
     * 流程驳回
     */
    taskHandlerReject(row, column, event) {
      let data = {};
      data.handlerStatus = row.taskDefKey ? 80 : 90;
      data.targetTaskDefKey = data.handlerStatus === 90 ? null : row.taskDefKey;
      this.$confirm(`您确定要驳回当前流程任务到【${row.taskName}】节点吗？`, '系统提示').then(() => {
        const inputValidator = (val) => {
          if (!val || val.length < 1) return "请输入您驳回原因"
          return true
        }
        return this.createdPrompt("系统提示", "请输入处理意见", inputValidator, null)
      }).then(({value}) => {
        data.handlerOpinion = value
        return startMyActTaskApi.handlerNodeApply(this.taskId, data)
      }).then(res => {
        this.$message.success('任务处理成功');
        setInterval(() => this.$emit("refresh"), 1000)
        this.$router.closeTag()

      })
    },
  }
}

</script>
<style scoped>
.bpmn-proc-track {
  height: calc(100vh - 260px)
}
</style>
